<template>
	<div class="activity">
		<!-- 顶部按钮 -->
		<div class="btn_group">
			<!-- 上传 -->
			
			<!-- 搜索框 -->
			<div class="dataSearch">
             <div style="margin-left: 1rem;color: #e2e2e2;">班级列表</div>
				<!-- 输入框 -->
			<!-- 	<input type="text" class="ipt_val" placeholder="搜索" v-model="formData.search" /> -->
				<!-- 放大镜 -->
				<!-- <input type="button" class="ipt_fdj" @click="getFiles" /> -->
				<!-- 搜索按钮 -->
				<!-- <button type="button" class="ipt_search" @click="getFiles">搜索</button> -->
				
			</div>
			<div class="header" >
				<button @click="newClassMask = true">
					<i class="el-icon-plus"></i>新建班级
				</button>
				<!-- <el-input v-model="search" placeholder="请输入内容" suffix-icon="fa fa-search"></el-input> -->
			</div>
		</div>

		

		<div class="body">
			<ul>
				<li v-for="(item, idx) of ClazzByCourseId" :key="idx" @mouseenter="item.isFalse = true" @mouseleave="item.isFalse = false"
				 v-show="switchStatusData==1&&item.isDelete==0">
					<div class="left">
						<span>{{ item.className}}</span>
						<p>学生人数：{{ item.count }}</p>

					</div>
					<div class="right">
						<div v-show="item.isFalse">
							<!-- <i class="fa fa-arrow-up" aria-hidden="true" @click="up(idx)"></i>
							<i class="fa fa-arrow-down" aria-hidden="true" @click="down(idx)"></i> -->
							<!-- 	<span @click="Administration()">管理</span> -->
							<span @click="reName(item.className, item.id)">重命名</span>
							<span @click="deleteBTn(item.id)">删除</span>
						</div>
						<div v-show="!item.isshow"></div>
						<p>邀请码:{{ item.clazzToken }}</p>
					</div>
				</li>
				<li v-for="(item, idx) of ClazzByCourseId" :key="item.id" @mouseenter="item.isFalse = true" @mouseleave="item.isFalse = false"
				 v-show="switchStatusData==2&&item.isDelete==1">
					<div class="left">
						<span>{{ item.className}}</span>
						<p>学生人数：{{ item.count }}</p>

					</div>
					<div class="right">
						<div v-show="item.isFalse">
							<!-- <i class="fa fa-arrow-up" aria-hidden="true" @click="up(idx)"></i>
							<i class="fa fa-arrow-down" aria-hidden="true" @click="down(idx)"></i> -->
							<!-- 	<span @click="Administration()">管理</span> -->
							<span @click="reName(item.className, item.id)">重命名</span>
							<span @click="deleteBTn(item.id)">删除</span>
						</div>
						<!-- <div v-show="!item.isFalse"></div> -->
						<p>邀请码:{{ item.clazzToken }}</p>
					</div>
				</li>
			</ul>
		</div>
		<el-dialog title="新建班级" :visible.sync="newClassMask" width="30%" :before-close="handleClose">
			<el-input v-model="className" placeholder="班级名称" class="input" style="width: 100%;"></el-input>
			<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 9}" placeholder="班级描述" v-model="clazzDescribe" class="input"
			 style="margin-top: 1.25rem;">
			</el-input>

			<span slot="footer" class="dialog-footer">
				<el-button @click="newClassMask = false">取 消</el-button>
				<el-button type="primary" @click="creatClazzByTeacher()">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="重命名" :visible.sync="reNameMask" width="30%" :before-close="handleClose">
			<el-input v-model="newTitle" placeholder="请输入新的班级名称" class="input" style="width: 100%;"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="reNameMask = false">取 消</el-button>
				<el-button type="primary" @click="reNameBtn()">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import {
		HttpManager
	} from "../../request/Teacher.js"
	export default {
		data() {
			return {
				search: "",
				newClassMask: false,
				reNameMask: false,
				title: "第四",
				numPeople: 55,
				newTitle: "",
				newTitleId: 0,
				list: [],
				// 表单数据
				formData: {
					// 上级文件夹id，默认全部文件最上层为0
					id: 0,
					// 搜索框内容
					search: '',
					// 是否逆序
					reverse: false
				},
				classID: window.localStorage.getItem("ClassId"),
				ClazzByCourseId: [],
				input: '',
				className: '',
				clazzDescribe: "班级的描述",
				switchStatusData: this.active, // 重新定义数据
				id: ''

			};
		},
		props: {
			active: {
				type: Number
			}
		},
		computed: {
			switchStatus: function() {
				return this.active
			}
		},
		created() {
			this.getClazzByCourseId();
		},
		methods: {
			//获取班级列表
			getClazzByCourseId() {
				var parmas = {
					courseId: this.classID
				}
				HttpManager.getClazzByCourseId(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.ClazzByCourseId = e.data.data;
				})

			},

			//存储到本地
			storage() {
				// localStorage.setItem("newClass", JSON.stringify(this.list));
			},
			//添加班级
			creatClazzByTeacher() {
				var classID = window.localStorage.getItem("ClassId");
				var parmas = {
					className: this.className,
					clazzDescribe: this.clazzDescribe,
					courseId: classID
				}
				HttpManager.creatClazzByTeacher(parmas).then(e => {
					console.log(e);
					this.$message({
						message: '班级创建成功',
						type: 'success'
					});
				});
				this.newClassMask = false;
				this.getClazzByCourseId();
			},
			// 重命名
			reName(n, id) {
				this.reNameMask = true;
				this.id = id;
				this.newTitle = n;
				this.newTitleId = parseInt(id, 16);
			},
			//重命名
			reNameBtn() {
				this.reNameMask = false
				this.axios.post("/education/clazz/updateClazzInf", {
						className: this.newTitle,
						courseId: localStorage.getItem("ClassId"),
						clazzDescribe: '12',
						id: this.id
					}, {
						headers: {
							'token': window.localStorage.getItem('token'),
						},
					})
					.then((res) => {
						console.log(res);
						this.reNameMask = false;
						this.$message({
							message: '修改成功',
							type: 'success'
						});
						this.getClazzByCourseId();
					});
			},
			// 删除
			deleteBTn(id) {
				HttpManager.deleteClazzById(id).then(e => {
					console.log(e);
					this.getClazzByCourseId();
				})
			},
			swapArray(arr, index1, index2) {
				arr[index1] = arr.splice(index2, 1, arr[index1])[0];
				return arr;
			},
			//上移
			up(id) {
				if (id != 0) {
					this.swapArray(this.list, id, id - 1);
				} else {
					alert("已经处于置顶，无法上移");
				}
			},
			//下移
			down(id) {
				if (id + 1 != this.list.length) {
					this.swapArray(this.list, id, id + 1);
				} else {
					alert("已经处于置底，无法下移");
				}
			},
			// 获取文件列表
			async getFiles() {
				// 清空被选中文件id列表
				this.checkedList = []
				console.log('获取文件列表')
				// params参数：文件夹id、搜索的值、是否逆序
				// this.files = await axios.get('/files', { params: this.formData })
			},
			Administration() {
				this.$router.push("/Administration");
			},
			handleClose() {

			}

		},
	};
</script>

<style scoped lang="scss">
	.input {
		margin-top: 1.25rem;

	}

	.activity {
		width: 90%;
		height: 100%;
		margin-left: 3%;
		/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); */
		border-radius: 10px;
		background-color: white;
		display: flex;
		flex-direction: column;
	}

	// 顶部按钮组
	.btn_group {
		display: flex;
		justify-content: space-between;
		margin-top: 1.25rem;
		margin-bottom: 20px;
		margin-left: 0.625rem;


		// 搜索框
		.dataSearch {
			position: relative;
			width: 300px;
			height: 36px;

			// 输入框
			.ipt_val {
				position: absolute;
				left: 0;
				top: 0;
				padding: 0 14px 0 28px;
				outline: none;
				border-color: #d5d7d9;
				width: 170px;
				height: 34px;
				font-size: 14px;
				color: #181e33;
				border: 1px solid #e5e5e5;
				background: #f5f6f7;
				border-radius: 40px;

				&:hover {
					border-color: #03D3BD;
				}

				&:focus {
					border-color: #03D3BD;
				}
			}

			// 放大镜
			.ipt_fdj {
				position: absolute;
				// right: 14px;
				left: 8px;
				top: 8px;
				border: none;
				width: 18px;
				height: 18px;
				background-color: pink;
				background: url(/images/search_ico_new.png);
				background-size: 18px;

				&:hover {
					cursor: pointer;
					background-position: 0 -22px;
				}
			}

			// 搜索按钮
			.ipt_search {
				// width: 40px;
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 22px;
				border: none;
				height: 36px;
				border-radius: 17px;
				background-color: #03D3BD;
				color: #fff;

				&:hover {
					cursor: pointer;
					color: #ffffff;
				}
			}
		}
	}

	// .header {
	// 	// width: 100%;
	// 	height: 100px;
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;
	// }

	.header button {
		height: 40px;
		width: 100px;
		outline: none;
		border: inherit;
		background-image: linear-gradient(to right, #03D3BD, #04DAC4);
		/* color: #03D3BD;
	color: #04DAC4; */
		color: white;
		border-radius: 40px;
		margin-left: 30px;
		cursor: pointer;
	}

	.header button i {
		margin-right: 5px;
		font-weight: bold;
	}

	.el-input {
		width: 200px;
		border-radius: 30px;
		margin-right: 50px;
	}

	.activity p {
		color: #adadb6;
		padding: 0 30px;
		cursor: default;
	}

	.body {
		overflow: scroll;
		scrollbar-width: none;
	}

	.body::-webkit-scrollbar {
		width: 0;
	}

	.body li {
		list-style: none;
		display: block;
		height: 100px;
		display: flex;
		border-bottom: 1px solid #ebeef5;
		cursor: default;
	}

	.body li:hover {
		background-color: #f7fafc;
	}

	.body li div {
		flex: 1;
	}

	.body li .left {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.body li .left span {
		padding: 0 30px;
	}

	.body li .right {
		display: flex;
		align-items: center;
	}

	.body li .right div {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.body li .right div i {
		margin: 0 5px;
		color: #a3bad9;
		cursor: pointer;
	}

	.body li .right div span {
		color: #67a1ff;
		margin: 0 5px;
		cursor: pointer;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.mask .box {
		height: 200px;
		width: 25%;
		background-color: white;
		border: 1px solid #ebeef5;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
		display: flex;
		// flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.mask .box .el-input {
		width: 250px;
		margin: 5px;
	}
</style>
